<template>
  <div>
    <el-dialog
      title="修改学生信息"
      :visible.sync="dialogVisible"
      width="430px"
      :before-close="handleClose"
      :close-on-click-modal="false"
      center
    >
      <el-main>
        <div>
          <label>学号</label>
          <el-input
            v-model="studentInfo.studentId"
            placeholder="请输入工号"
            size="small"
          />
        </div>
        <div>
          <label>姓名</label>
          <el-input
            v-model="studentInfo.name"
            placeholder="请输入姓名"
            size="small"
          />
        </div>
        <div>
          <label>性别</label>
          <el-select
            v-model="studentInfo.male"
            placeholder="请选择性别"
            size="small"
          >
            <el-option
              v-for="item in male"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div>
          <label>所属院系</label>
          <el-select
            v-model="studentInfo.departmentId"
            @change="handleChangeDepartment"
            placeholder="请选择院系"
            size="small"
          >
            <el-option
              v-for="item in departmentList"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            ></el-option>
          </el-select>
        </div>
        <div>
          <label>所属专业</label>
          <el-select
            v-model="studentInfo.majorId"
            placeholder="请选择专业"
            size="small"
          >
            <el-option
              v-for="item in DepartmentMajor"
              :key="item.majorId"
              :label="item.majorName"
              :value="item.majorId"
            ></el-option>
          </el-select>
        </div>
        <div>
          <label>年级</label>
          <el-select
            v-model="studentInfo.enrollmentYear"
            placeholder="请选择年级"
            @change="handleChangeMajorAndEnrollmentYear"
            size="small"
          >
            <el-option
              v-for="(item, index) in EnrollmentYear"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        <div>
          <label>班级</label>
          <el-select
            v-model="studentInfo.className"
            placeholder="请选择班级"
            size="small"
          >
            <el-option
              v-for="(item, index) in DepartmentMajorClass"
              :key="index"
              :label="item.className"
              :value="item.className"
            ></el-option>
          </el-select>
        </div>
        <div>
          <label>联系方式</label>
          <el-input
            v-model="studentInfo.phoneNumber"
            placeholder="请输入联系方式"
            size="small"
          ></el-input>
        </div>
        <div>
          <label>地址</label>
          <el-input
            v-model="studentInfo.address"
            placeholder="请输入地址"
            size="small"
          ></el-input>
        </div>
      </el-main>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确认修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      studentInfo: {
        studentId: "",
        name: "",
        male: "",
        majorId: "",
        enrollmentYear: "",
        className: "",
        phoneNumber: "",
        address: "",
        departmentId: "",
        //         "studentId": "222222222222",
        // "name": "周晓升",
        // "male": false,
        // "majorId": 3,
        // "enrollmentYear": "2020级",
        // "className": "卓越二班",
        // "phoneNumber": "13600000000",
        // "address": "C10-100"
      },
      departmentList: [],
      DepartmentMajor: [],
      EnrollmentYear: [],
      DepartmentMajorClass: [],

      male: [
        {
          value: true,
          label: "男",
        },
        {
          value: false,
          label: "女",
        },
      ],
    };
  },
  methods: {
    submit() {
      let options = this.studentInfo;
      delete options.departmentId;
      this.$http.post(this.$api.StudenModifiedInfo, options).then((resp) => {
        if (resp.success) {
          this.$myMessage.success(this, resp.data);
          this.$emit("flash")
          this.dialogVisible = false;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回院系列表
    returnDepartment() {
      this.$http.get(this.$api.InfoDepartment).then((resp) => {
        if (resp.success) {
          this.departmentList = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回入学年份
    returnEnrollmentYear() {
      this.$http.get(this.$api.InfoEnrollmentYear).then((resp) => {
        if (resp.success) {
          this.EnrollmentYear = resp.data.enrollmentYears;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    // 级联，处理院系选中
    handleChangeDepartment(value) {
      this.studentInfo.majorId = null
      this.studentInfo.enrollmentYear = null
      this.studentInfo.className = null
      this.returnDepartmentMajor();
    },
    // 级联，处理专业和入学年份选中
    handleChangeMajorAndEnrollmentYear(value) {
      this.studentInfo.className = null
      this.returnClass();
    },
    //返回入学年份
    returnDepartmentMajor() {
      let departmentId = this.studentInfo.departmentId;
      let options = { departmentId: departmentId };
      this.$http.post(this.$api.InfoDepartmentMajor, options).then((resp) => {
        if (resp.success) {
          this.DepartmentMajor = resp.data;
        } else {
          this.$handleFailResp(this, resp);
        }
      });
    },
    //返回班级列表
    returnClass() {
      let options = {
        majorId: this.studentInfo.majorId,
        enrollmentYear: this.studentInfo.enrollmentYear,
      };
      this.$http
        .post(this.$api.InfoDepartmentMajorClass, options)
        .then((resp) => {
          if (resp.success) {
            this.DepartmentMajorClass = resp.data;
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {
    this.returnDepartment();
    this.returnEnrollmentYear();
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  border-radius: 5px;
}

/deep/ .el-dialog__header {
  background-color: rgb(51, 55, 68);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/ .el-dialog__title {
  font-size: 23px;
  color: white;
}

.el-input {
  width: 220px;
  margin-left: 40px;
  padding: 0;
}
.el-select {
  width: 220px;
  margin-left: 40px;
}

.el-main {
  align-items: center;
}

.el-main div:nth-child(n + 2) {
  margin-top: 10px;
}

.el-main div label {
  color: rgb(51, 55, 68);
  display: inline-block;
  width: 60px;
  font-size: 15px;
}

.el-button--primary {
  background-color: rgb(51, 55, 68);
  color: white;
  border: 0;
  width: 150px;
}
</style>
